import React from 'react'
import { Spin } from 'antd'


function ListItem({ list }) {
  return [
    ...list.map((item, index) => <div key={index} className="list-item-box"><div className="list-item">{item.name}</div></div>),
    ...Array.from(new Array(10 + 1).keys()).slice(1).map((i, key) => <div key={key + 101} className="null-box"></div>)]
}

function List({ loading, data }) {
  return (
    <div className="main">{loading ? <Spin className="loading" spinning={loading} /> : <ListItem list={data} />}</div>
  )
}

export default List
